<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .cvs{
      border: solid 1px black;
    }
  </style>
</head>
<body>
  <canvas class="cvs"></canvas>
</body>
<script>
  
  const cvs = document.querySelector(".cvs");
  cvs.width = 400;
  cvs.height = 400;

  const ctx = cvs.getContext("2d");

  // 填充文字
  // 水平对齐
  // ctx.font = "80px 楷体";
  // ctx.textAlign = "left";
  // ctx.fillText("千锋", 200, 100);

  // ctx.textAlign = "center";
  // ctx.fillText("千锋", 200, 200);

  // ctx.textAlign = "right";
  // ctx.fillText("千锋", 200, 300);


  // 垂直对齐
  // ctx.font = "50px 楷体";
  // ctx.textBaseline = "top";
  // 填充颜色
  // ctx.fillStyle = "blue";
  // ctx.fillText("千锋", 20, 200);
  
  // ctx.textBaseline = "middle";
  // ctx.fillStyle = "yellow";
  // ctx.fillText("千锋", 140, 200);
  
  // ctx.textBaseline = "bottom";
  // ctx.fillStyle = "red";
  // ctx.fillText("千锋", 260, 200);

  // 描边文字
  // ctx.font = "100px 楷体";
  // ctx.strokeStyle = "red";
  // ctx.strokeText("千锋", 100, 200);

  // 文字的初始位置
  const x = 10;
  const y = 200;
  // 文字的大小
  const fs = 40;

  const str = "千锋数字智慧大前端";
  ctx.font = fs + "px 楷体";
  ctx.strokeStyle = "red";
  ctx.textBaseline = "bottom";
  ctx.strokeText(str, x, y);


  const strMsg = ctx.measureText(str);
  // ctx.moveTo(x, y);
  // ctx.lineTo(x + strMsg.width, y);
  // ctx.stroke();
  ctx.strokeRect(x, y-fs, strMsg.width, fs);

</script>
</html>